import React, { Component } from 'react'
import PropListItem from './ListItem' // 类组件
// import PropListItem from './ListItemFun'  // 函数组件

class PropsList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      dataList:
      [
        {
          id: 1,
          name: '笔记本1',
          price: 4500,
          stock: 12
        },
        {
          id: 2,
          name: '笔记本2',
          price: 14500,
          stock: 4
        },
        {
          id: 3,
          name: '笔记本3',
          price: 78300,
          stock: 122
        }
      ]
    }
  }
  handleDelete = id => {
    const dataList = this.state.dataList.filter(el => el.id !== id)
    console.log('delete------id', id, dataList)
    this.setState({
      dataList
    })
  }
  // 通过函数方式来作条件渲染
renderList () {
  if (this.state.dataList.length === 0) {
    return <div className="text-center">购物车是空的</div>
  }
  return this.state.dataList.map( item => {
    return <PropListItem key={item.id} data={item} onDelete={this.handleDelete}/>
  })
}
  render() {
    return(
      <div className="container">
        {/* {dataList.length === 0 && <div className="text-center">购物车是空的</div> } */}
        {/* <PropListItem data={dataList[0]}/>
        <PropListItem data={dataList[1]}/>
        <PropListItem data={dataList[2]}/> */
          this.renderList()
        }

      </div>
    )
  }
}
export default PropsList